<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Links Network packages example</title>

    <style>
      body {
        font: 10pt arial; 
        width: 800px;
      }
      form {
        border: 1px solid gray; 
        padding: 5px; 
        background-color: #E6E6E6;
        margin-bottom: 5px;
      }
      input[type="text"] {
        width: 30px;
      }
    </style>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="../network.js"></script>
    
    <script type="text/javascript">
      var nodesTable = null;
      var linksTable = null;
      var packagesTable = null;
      var network = null;
      
      google.load('visualization', '1');
      
      // Set callback to run when API is loaded
      google.setOnLoadCallback(draw); 

      // Called when the Visualization API is loaded.
      function draw() {
        // Create and populate a data table.
        nodesTable = new google.visualization.DataTable();
        nodesTable.addColumn('string', 'id');
        nodesTable.addColumn('string', 'text');
        for (var i = 1; i < 10; i++) {
          nodesTable.addRow([i + '', '' + i]);
        }
        
        var len = 100;        
        linksTable = new google.visualization.DataTable();
        linksTable.addColumn('number', 'from');
        linksTable.addColumn('number', 'to');        
        linksTable.addColumn('number', 'length');
        linksTable.addRow([2, 1, len]);
        linksTable.addRow([3, 1, len]);
        linksTable.addRow([4, 2, len]);
        linksTable.addRow([5, 2, len]);
        linksTable.addRow([6, 2, len]);
        linksTable.addRow([7, 3, len]);
        linksTable.addRow([8, 3, len]);
        linksTable.addRow([9, 4, len]);
        linksTable.addRow([2, 3, len]);
        
        packagesTable = new google.visualization.DataTable();
        packagesTable.addColumn('number', 'id');
        packagesTable.addColumn('number', 'from');
        packagesTable.addColumn('number', 'to');        
        packagesTable.addColumn('number', 'progress');
        packagesTable.addColumn('number', 'duration');
        packagesTable.addRow([undefined, 3, 8, undefined, 5]); // auto progress

        // specify options
        var options = {
          'width': '100%',
          'height': '400px',
          'stabilize': true
        };

        // Instantiate our graph object.
        network = new links.Network(document.getElementById('mynetwork'));

        // Draw our graph with the created data and options 
        network.draw(nodesTable, linksTable, packagesTable, options);
        addPackage();
        addStaticPackage();
      }

      function addPackage() {
        try {
          var from = parseInt(document.getElementById('autoFrom').value);
          var to = parseInt(document.getElementById('autoTo').value);

          packagesTable = new google.visualization.DataTable();
          packagesTable.addColumn('number', 'from');
          packagesTable.addColumn('number', 'to');        
          packagesTable.addRow([from, to]);
          network.addPackages(packagesTable);
        }
        catch(err) {
          alert(err);
        }
      }      
      
      function addStaticPackage() {
        try {
          var id = parseInt(document.getElementById('staticId').value);
          var from = parseInt(document.getElementById('staticFrom').value);
          var to = parseInt(document.getElementById('staticTo').value);
          var progress = parseFloat(document.getElementById('staticProgress').value);

          packagesTable = new google.visualization.DataTable();
          packagesTable.addColumn('number', 'id');
          packagesTable.addColumn('number', 'from');
          packagesTable.addColumn('number', 'to');        
          packagesTable.addColumn('number', 'progress');        
          packagesTable.addColumn('string', 'action');        
          packagesTable.addRow([id, from, to, progress, 'create']);
          network.addPackages(packagesTable);
        }
        catch(err) {
          alert(err);
        }
      }
      
      function deletePackage() {
        try {
          var id = parseInt(document.getElementById('staticId').value);
          
          packagesTable = new google.visualization.DataTable();
          packagesTable.addColumn('number', 'id');
          packagesTable.addColumn('number', 'from');
          packagesTable.addColumn('number', 'to');        
          packagesTable.addColumn('string', 'action');
          packagesTable.addRow([id, undefined, undefined, 'delete']);
          network.addPackages(packagesTable);
        }
        catch(err) {
          alert(err);
        }
      }
      function minus() {
        var progress = document.getElementById('staticProgress');
        progress.value = parseFloat(progress.value) - 0.1;
        progress.value = Math.round(progress.value * 10) / 10;
        if (progress.value < 0.0) progress.value = 0.0;
      }
      
      function plus() {
        var progress = document.getElementById('staticProgress');
        progress.value = parseFloat(progress.value) + 0.1;
        progress.value = Math.round(progress.value * 10) / 10;
        if (progress.value > 1.0) progress.value = 1.0;
      }

   </script>

  </head>

  <body>
    <form onsubmit= "javascript: addPackage(); return false;">
      Add automatic package
      from node <input type="text" value="1" id="autoFrom"> 
      to node <input type="text" value="3" id="autoTo"> 
      <input type="submit" value="Add">
    </form>
    
    <form onsubmit= "javascript: addStaticPackage(); return false;">
      Add static package widh 
      id <input type="text" value="1" id="staticId" > 
      from node <input type="text" value="2" id="staticFrom" > 
      to node <input type="text" value="4" id="staticTo" > 
      with progress <input type="text" value="0.5" id="staticProgress" title="Choose a value between 0 and 1"> 
      <input type="submit" value="-" onclick="minus();">
      <input type="submit" value="+" onclick="plus();">
      <input type="submit" value="Update">
      <input type="submit" value="Delete" onclick="deletePackage(); return false;">
    </form>
        
    <div id="mynetwork"></div>
  </body>
</html>
